{% extends "base_admin.html" %}
{% load static %}

{%block css%}
<link rel="stylesheet" href="{%static '/css/car_index.css'%}">
{%endblock%}

{% block active2 %}
active
{%endblock%}


{%block content%}
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">车辆搜索-车辆管理</h3>
  </div>
  <div class="panel-body">
    <a class="btn btn-default" href="/car/add">
        <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        添加车辆
    </a>
    <a class="btn btn-default" href="/car/cancel_car_list">
        <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
        权限取消记录
    </a>
    <form method="get" class="form-inline" >
        <!-- {%csrf_token%} -->
        <label for="">
        </label>
        <div class="form-group">
            <input type="text" class="form-control"  placeholder="姓名" name="name" value="{{name}}" autocomplete="off">
        </div>
        <div class="form-group">
            <input type="text" class="form-control"  placeholder="车牌号" name="car_no" value="{{car_no}}" autocomplete="off">
        </div>
          <select class="form-control" name="category" value="{{category}}">
            {%if category == "1"%}
              <option value="" >—— 人员类别 ——</option>
              <option value="1" selected>本校职工</option>
              <option value="2">外聘老师</option>
              <option value="3">合作单位</option>
            {%elif category == "2"%}
              <option value="">—— 人员类别 ——</option>
              <option value="1" >本校职工</option>
              <option value="2" selected>外聘老师</option>
              <option value="3">合作单位</option>
            {%elif category == "3"%}
              <option value="">—— 人员类别 ——</option>
              <option value="1" >本校职工</option>
              <option value="2">外聘老师</option>
              <option value="3" selected>合作单位</option>
            {%else%}
              <option value="">—— 人员类别 ——</option>
              <option value="1">本校职工</option>
              <option value="2">外聘老师</option>
              <option value="3">合作单位</option>
            {%endif%}
          </select>
        
        <button type="submit" class="btn btn-default">搜索</button>
        <a class="btn btn-default" href="/car/index">重置</a>
    </form>
  </div>
</div>


<table class="table table-striped">
    <thead>
        <tr>
            <td>序号</td>
            <td class="">姓名</td>
            <td class="">部门</td>
            <td class="">所在单位</td>
            <td class="">车牌号</td>
            <td class="">电话号码</td>
            <td class="">南门权限</td>
            <td class="">东门权限</td>
            <td class="">西门权限</td>
            <td class="">东南门权限</td>
            <td class="">开通日期</td>
            <td class="">到期时间</td>
            <td class="">人员类别</td>
            <td class="">备注</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
            {% for car_info in queryset %}
                <tr>
                    <td class="info_id">{{forloop.counter0|add:page_id_start}}</td>
                    <td>{{car_info.name}}</td>
                    <!-- 通过get_字段名_display方法找到对应choices -->
                    <td>{{car_info.department}}</td>
                    <!-- 获得college对象，通过get_字段名_display方法找到对应choices -->
                    <td>{{car_info.dep_detail}}</td>
                    <td>{{car_info.car_number}}</td>
                    <td>{{car_info.phone_number}}</td>
                    <td class="gate">{{car_info.get_south_gate_display}}</td>
                    <td class="gate">{{car_info.get_east_gate_display}}</td>
                    <td class="gate">{{car_info.get_west_gate_display}}</td>
                    <td class="gate">{{car_info.get_southeast_gate_display}}</td>
                    <td>{{car_info.create_date | date:"Y-m-d"}}</td>
                    <td class="due_date">{{car_info.due_date|date:"Y-m-d"}}</td>
                    <td>{{car_info.get_category_display}}</td>
                    <td>{{car_info.notes}}</td>
                    <td style="display: flex;flex-direction: row;">
                        <a class="btn btn-primary btn-xs" href="/car/{{car_info.id}}/edit">变更</a>
                        <a class="cancel btn btn-danger btn-xs" data-id="{{car_info.id}}">取消权限</a>
                    </td>
                </tr>
            {% endfor %}
    </tbody>
</table>
<!-- 确认删除对话框 -->
<div class="modal fade" id="confirmModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认取消</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                确定要取消权限吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="confirmNo btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" id="confirmYes" class="btn btn-primary">是的，继续</button>
            </div>
        </div>
    </div>
</div>

<!-- 选择原因对话框 -->
<div class="modal fade" id="reasonModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">请选择取消权限原因</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body ">
                    <select id="deleteReason" class="form-select form-control" >
                        <option value="">请选择原因</option>
                        <option value="1">变更车辆</option>
                        <option value="2">员工离职</option>
                        <option value="3">权限到期</option>
                        <option value="4">违规取消</option>
                    </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="confirmNo btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" id="submitReason" class="btn btn-primary">提交原因</button>
            </div>
        </div>
    </div>
</div>



<nav aria-label="Page navigation">
  <ul style="justify-content: center;width: 100%;" class="pagination">
    {{page_str}}
  {{page_info}}
  </ul>
</nav>

{%endblock%}

{%block script%}
<script>
       $(document).ready(function() {
       var selecte_id;
    $('.cancel').click(function() {
        selecte_id=$(this).data('id');
        $('#confirmModal').modal('show');
    });

    // 确认删除对话框中的“是的，继续”按钮点击事件
    $('#confirmYes').click(function() {
        $('#confirmModal').modal('hide');
        $('#reasonModal').modal('show');
    });
    // “取消”按钮点击事件
    $('.confirmNo').click(function(){
      $("#confirmModal").modal('hide');
      $("#reasonModal").modal('hide');
    })

    // 提交原因按钮点击事件
    $('#submitReason').click(function() {
        var reason = $('#deleteReason').val();
        if (reason === '') {
            alert('请选择取消权限原因');
            return;
        }

        // 发送AJAX请求到后端
        $.ajax({
            url: '/car/'+selecte_id+'/delete',
            type: 'GET',
            data: {
                'reason': reason,
                // 'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            dataType:"JSON",
            success: function(response) {
                if (response.status) {
                    // alert('删除成功');
                    window.location.reload();
                } else {
                    alert('删除失败，请重试');
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX请求错误：', error);
                alert('发生错误，请稍后再试');
            }
        });

        // 隐藏原因选择对话框
        $('#reasonModal').modal('hide');
    });

            // 到期时间大于当前时间显示成红色
            $(".due_date").each(function(){
              // 获取当前日期和时间
              var now = new Date();
              var dateText = $(this).text();
                try {
                    // 解析目标日期，确保格式正确
                    var targetDate = new Date(dateText);
                    // 比较当前时间和目标时间
                    if (now >= targetDate) {
                        // 如果已过期，改变颜色为红色
                        $(this).css({color:'red',
                          fontWeight:"bold"
                        });
                        $(this).addClass('expired');
                    }
                } catch(e) {
                    console.error("日期解析错误：", e);
                }
            })
        });

    
</script>
{%endblock%}